<template>
	<view class="content">
		<view class="top">
			<uni-nav-bar left-icon="back" fixed="true" backgroundColor="url('/webh5/static/topbgye.png')"
				title="订单详情" color="white" @clickLeft="returnBack">
			</uni-nav-bar>
		</view>
		<view class="scrollbox flex">
			<scroll-view class="scroll-view_H" scroll-x>
				<view class="wei" :class="defaultOp==item.id?'xuanzhong':''" v-for="(item,index) in optionData"
					:key="index" @click="setOption(item.id,index)">
					{{item.cateName}}
					<view class="dibu" v-if="defaultOp==item.id"></view>
				</view>
			</scroll-view>
		</view>
		<view class="box">
			<block v-if="navList.orderList.length>0">
				<view class="item" v-for="(item,index) in navList.orderList" :key="index">
					<view class="top-box flex">
						<view class="right">
							{{item.status==-1?'交易关闭':item.status==0?'等待付款':item.status==1?'待发货':item.status==2?'待收货':item.status==3?'交易成功':''}}
						</view>
					</view>
					<view class="center-box flex">
						<view class="left">
							<image :src="item.productImage"></image>
						</view>
						<view class="right">
							<view class="name-box">{{item.productName}}</view>
							<view class="jifen-box">{{item.productAttrName}}</view>
						</view>
					</view>
					<view class="henga flex">
						<view class="title">订单编号</view>
						<view class="text">{{item.orderId}}</view>
					</view>
					<view class="henga flex">
						<view class="title">收货人</view>
						<view class="text">{{item.realName}} {{item.userPhone}}</view>
					</view>
					<view class="henga flex">
						<view class="title">快递编号</view>
						<view class="text flex">
							<text class="ww">{{item.deliveryId?item.deliveryId:'无'}}</text>
							<text class="ww" style="color: #FF5D5D;" @click="goCopy(item.deliveryId)">复制</text>
						</view>
					</view>
					<view class="henga flex">
						<view class="title">收货地址</view>
						<view class="text" style="width: 65%;">{{item.userAddress}}</view>
					</view>
					<view class="henga flex">
						<view class="title">创建时间</view>
						<view class="text">{{item.createTime}}</view>
					</view>
					<view class="btn-box flex" v-if="item.status==0||item.status==2">
						<button class="quxiao" @click="chanle(item)" v-if="item.status==0&&item.paid==0">取消订单</button>
						<button class="btna" @click="goPay(item.orderId,item.payType)"
							v-if="item.status==0">去支付</button>
						<button class="btna" @click="sureOrder(item.orderId)" v-if="item.status==2">确认收货</button>
					</view>
					<view class="price-box" v-if="item.status==1||item.status==3">
						<text style="margin-right: 25rpx;">购买数量：{{item.totalNum}}</text>
						<text style="margin-right: 25rpx;">邮费：{{item.payPostage}}</text>合计:
						<text style="margin-left: 5rpx;" v-if="item.showYue">{{item.payPrice}}积分</text>
						<text style="margin-left: 5rpx;" v-else>¥{{item.payPrice}}</text>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="center-box-image">
					<image src="/static/konga.png"></image>
					<text class="textA">暂无订单</text>
				</view>
			</block>
		</view>
		<!-- 加载 -->
		<uni-load-more v-if="navList.orderList.length>0" :status="navList.loadingType"></uni-load-more>
	</view>
</template>

<script>
	var _this;
	var page = 1;
	const app = getApp();
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import {
		getCookie,
		setCookie
	} from "@/utils/cookie.js";
	import {
		isIphone,
		returnBackApp
	} from '@/utils/common.js';
	import uniCopy from '@/utils/uni-copy.js'
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	export default {
		components: {
			uniNavBar,
			uniLoadMore
		},
		data() {
			return {
				pageSize: 5,
				isIphoneUser: false, //判断是否是苹果
				dataUrl: {
					url: "https://game-rfs.3yakj.com/webh5/pages/payEnd/payEnd?runmethod=hidetopbar"
				}, //让APP跳转到的指定页面(积分商城结果页)
				datamangheUrl: {
					url: "https://game-rfs.3yakj.com/webh5/pages/payEnd/pickResult?runmethod=hidetopbar"
				}, //让APP跳转到的指定页面(盲盒结果页)
				navList: {
					loadingType: 'more',
					page: 1,
					orderList: []
				},
				defaultOp: -2,
				optionData: [{
					cateName: '全部',
					id: -2
				}, {
					cateName: '待付款',
					id: 0
				}, {
					cateName: '待发货',
					id: 1
				}, {
					cateName: '交易成功',
					id: 3
				}, {
					cateName: '交易失败',
					id: -1
				}, ], //顶部分类
				intervalClick: false, //为了处理商品渲染问题
				returnShow: false,
			};
		},
		onLoad(options) {
			_this = this;
			_this.returnShow = options.type ? true : false;
			_this.isIphoneUser = isIphone();
			_this.loadData();
		},
		onShow() {},
		methods: {
			returnBack() {
				if (_this.returnShow) {
					// #ifdef H5
					const pages = getCurrentPages()
					if (pages.length > 1) {
						uni.navigateBack(1)
						return;
					}
					//使用vue-router返回上一级
					let a = this.$router.go(-1)
					if (a == undefined) {
						//重新定向跳转页面
						uni.reLaunch({
							url: "/pages/index/index"
						})
					}
					return;
					// #endif
					uni.navigateBack(1)
				} else {
					returnBackApp();
				}
			},
			setOption(id, index) {
				if (_this.defaultOp == id) {
					return;
				}
				if (_this.intervalClick) {
					return;
				}
				_this.intervalClick = true;
				setTimeout(function() {
					_this.intervalClick = false;
				}, 300)
				_this.defaultOp = id;
				_this.navList.page = 1;
				_this.navList.loadingType = 'more';
				_this.navList.loaded = false;
				_this.loadData('reset');
			},
			//获取订单列表
			loadData(source) {
				var navItem = _this.navList;
				//这里是将订单挂载到tab列表下
				if (navItem.loadingType === 'loading') {
					//防止重复加载
					return;
				}
				if (navItem.loadingType === 'noMore') {
					return; //防止数据没有了还在加载
				}
				navItem.loadingType = 'loading';
				_this.$HTTP({
					method: 'GET',
					url: 'fjStoreOrder/getOrderList',
					data: {
						"page": navItem.page,
						"size": _this.pageSize,
						"status": _this.defaultOp,
						"time": Date.parse(new Date())
					},
					// header:'form' 
				}).then(res => {
					navItem.page++;
					res.data.content.forEach(item => {
						if (item.payType.indexOf("yue") != -1) {
							item.showYue = true;
						}
					})
					if (source == 'reset') {
						navItem.orderList = res.data.content;
					} else {
						res.data.content.forEach(item => {
							navItem.orderList.push(item);
						})
					}
					//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
					this.$set(navItem, 'loaded', true);
					//判断第一次的数据有没有pageSize的条数  没有则return
					if (res.data.content.length <= _this.pageSize && res.data.content.length >= res.data.total) {
						navItem.loadingType = 'noMore';
						return;
					}
					//判断分页后的数据还有没有  没有则return
					if (res.data.content.length < _this.pageSize || res.data.content.length == 0) {
						navItem.loadingType = 'noMore';
						return;
					}
					//判断是否还有数据， 有改为 more， 没有改为noMore 
					navItem.loadingType = 'more';

				}).catch(err => {
					console.log(err)
				})
			},
			chanle(item) {
				if (item.paid !== 0) {
					_this.$api.msg('该订单无法取消');
					return;
				}
				_this.$HTTP({
					method: 'GET',
					url: 'fjStoreOrder/cancel',
					data: {
						"orderId": item.orderId,
						"time": Date.parse(new Date())
					},
					// header:'form' 
				}).then(res => {
					_this.navList.page = 1;
					_this.navList.loadingType = 'more';
					_this.navList.loaded = false;
					_this.loadData('reset');
				}).catch(err => {
					console.log(err)
				})
			},
			// 支付接口
			goPay(orderid, type) {
				_this.$HTTP({
					method: 'GET',
					url: 'fjStoreOrder/pay',
					data: {
						"orderId": orderid,
						"time": Date.parse(new Date())
					},
					// header:'form' 
				}).then(res => {
					if (res.data) {
						// 是苹果环境
						if (_this.isIphoneUser) {
							if (type == 'weixin' || type.indexOf("weixin") != -1) {
								if (type == 'manghe' || type.indexOf("manghe") != -1) {
									window["webkit"].messageHandlers.paysgopage.postMessage(_this.datamangheUrl);
								} else {
									window["webkit"].messageHandlers.paysgopage.postMessage(_this.dataUrl);
								}
								var urla = 'wap.3yakj.com://';
								var url = encodeURIComponent(urla);
								var tiaozhuan = res.data.result.jsConfig.mweb_url + "&redirect_url=" + url;
								window.location.replace(tiaozhuan);
							}
							// 苹果的支付宝方式，因为苹果那边说支付宝下了就没用
							// if(type=='alipay'||type.indexOf("alipay") != -1){
							// 	// window.webkit.messageHandlers.paysgopage.postMessage(_this.dataUrl);
							// 	window["webkit"].messageHandlers.paysgopage.postMessage(_this.dataUrl)
							// 	let div = document.createElement("div");
							// 	div.innerHTML = res.data.result.jsConfig.mweb_url;
							// 	document.body.appendChild(div);
							// 	document.forms[0].submit();
							// 	setTimeout(() => {
							// 	    document.body.removeChild(div);
							// 	}, 2000);
							// }
						}
						// 是安卓环境
						else {
							var newTextUrl = {};
							if (type == 'manghe' || type.indexOf("manghe") != -1) {
								newTextUrl = _this.datamangheUrl;
							} else {
								newTextUrl = _this.dataUrl;
							}
							let text = JSON.stringify(newTextUrl);
							window["liveapp"].paySuccessGoPage(text);
							if (type == 'weixin' || type.indexOf("weixin") != -1) {
								window.location.replace(res.data.result.jsConfig.mweb_url);
							}
							if (type == 'alipay' || type.indexOf("alipay") != -1) {
								let div = document.createElement("div");
								div.innerHTML = res.data.result.jsConfig.mweb_url;
								document.body.appendChild(div);
								document.forms[0].submit();
								setTimeout(() => {
									document.body.removeChild(div);
								}, 2000);
							}
						}

					} else {
						_this.navList.page = 1;
						_this.navList.loadingType = 'more';
						_this.navList.loaded = false;
						_this.loadData('reset');
					}
				}).catch(err => {
					console.log(err)
				})
			},
			sureOrder(id) {
				_this.$HTTP({
					method: 'GET',
					url: 'fjStoreOrder/updateStatus',
					data: {
						"orderId": id,
						"time": Date.parse(new Date())
					},
					// header:'form' 
				}).then(res => {
					_this.navList.page = 1;
					_this.navList.loadingType = 'more';
					_this.navList.loaded = false;
					_this.loadData('reset');
				}).catch(err => {
					console.log(err)
				})
			},
			//复制
			goCopy(orderid) {
				if (!orderid) {
					_this.$api.msg('暂无单号，无法复制');
					return;
				}
				uniCopy({
					content: orderid,
					success: (res) => {
						_this.$api.msg('已复制到剪贴板');
					},
					error: (e) => {
						_this.$api.msg(e);
					}
				})
			},
		},
		// 下拉刷新
		onPullDownRefresh() {},
		// 上拉加载
		onReachBottom: function() {
			this.loadData();
		}
	}
</script>
<style lang="less">
	page {
		width: 100%;
		background: #FBFBFF;
	}
</style>
<style scoped lang="less">
	.xuanzhong {
		font-size: 34rpx !important;
		font-weight: bold !important;
		color: #34333B !important;
	}

	.scrollbox {
		width: 100%;
		height: 98rpx;
		background: #FFFFFF;
		align-items: center;
		position: relative;
		overflow: hidden;

		.scroll-view_H {
			width: 100%;
			height: 100%;
			white-space: nowrap;
			z-index: 3;

			.wei {
				width: 20%;
				height: 98rpx;
				line-height: 98rpx;
				text-align: center;
				font-size: 28rpx;
				font-weight: 400;
				color: #81839B;
				display: inline-block;
				position: relative;

				.dibu {
					width: 62rpx;
					height: 15rpx;
					position: absolute;
					bottom: 27rpx;
					z-index: 2;
					left: calc(50% - 31rpx);
					background-image: url('~@/static/xzt.png');
					background-size: 100% 100%;
				}
			}
		}
	}

	.top {
		width: 100%;
	}

	.center-box-image {
		width: 100%;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		margin-top: 300rpx;

		image {
			width: 260rpx;
			height: 260rpx;
		}

		.textA {
			width: 100%;
			font-size: 28rpx;
			font-weight: 400;
			color: #CCCCCC;
			text-align: center;
			margin-top: 15rpx;
		}
	}

	.content {
		width: 100%;

		.box {
			width: 100%;
			box-sizing: border-box;
			padding: 0 13rpx;

			.item {
				width: 100%;
				margin-top: 20rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.1);
				border-radius: 10rpx;
				box-sizing: border-box;
				padding: 20rpx;

				.top-box {
					width: 100%;
					justify-content: flex-end;

					.right {
						font-size: 24rpx;
						font-weight: 400;
						color: #FF5D5D;
					}
				}

				.center-box {
					width: 100%;
					margin-bottom: 10rpx;

					.left {
						width: 130rpx;
						height: 130rpx;

						image {
							width: 130rpx;
							height: 130rpx;
							border-radius: 10rpx;
						}
					}

					.right {
						width: 100%;
						margin-left: 15rpx;

						.name-box {
							width: 100%;
							margin-top: 20rpx;
							font-size: 28rpx;
							font-weight: 400;
							color: #000000;
							overflow: hidden;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
						}

						.jifen-box {
							width: 100%;
							margin-top: 15rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #B1B1B1;
						}
					}
				}

				.henga {
					width: 100%;
					margin-top: 20rpx;
					align-items: center;

					.title {
						width: 25%;
						font-size: 24rpx;
						font-weight: 400;
						color: #000000;
					}

					.text {
						width: 75%;
						font-size: 24rpx;
						font-weight: 400;
						color: #000000;
						white-space: pre-wrap;
						align-items: center;
						justify-content: space-between;
					}
				}

				.btn-box {
					width: 100%;
					margin-top: 50rpx;
					align-items: center;
					justify-content: flex-end;

					.quxiao {
						width: 155rpx;
						height: 50rpx;
						border: 1rpx solid #FFB633;
						border-radius: 25rpx;
						line-height: 50rpx;
						font-size: 24rpx;
						color: #010101;
					}

					.btna {
						width: 155rpx;
						height: 50rpx;
						background: #FFB633;
						border-radius: 25rpx;
						line-height: 50rpx;
						font-size: 24rpx;
						color: #FFFFFF;
						margin-left: 33rpx;
					}
				}

				.price-box {
					width: 100%;
					margin-top: 10rpx;
					text-align: right;
					font-size: 24rpx;
					font-weight: bold;
					color: #000000;
				}
			}
		}

	}
</style>
